<template>
    <div>
      <Drawer
          title="全部消息"
          v-model="modal.MyMsgFlag"
          placement="left"
          width="720"
          :mask-closable="false"  >
        <Tabs>
          <TabPane label="已读消息" icon="md-mail-open">
            <List :loading="loading" style="cursor: pointer" v-for="(item,index) in msgList" :key="index">
              <ListItem v-if="item.isRead">
                <ListItemMeta  :title="'公告【'+new Date(item.updateTime).toLocaleDateString()+'】'" @click.native="openAnnouncement(item)"
                               :description="item.title">
                  <template slot="avatar">
                    <Avatar v-if="item.userDO.avatarUrl==null" icon="ios-paper"  />
                    <Avatar v-else :src="item.userDO.avatarUrl"/>
                  </template>
                </ListItemMeta>
              </ListItem>
            </List>
<!--            <List v-for="(item,index) in taskMsg" :key="index">
              <ListItem v-if="!item.isRead">
                <ListItemMeta  :title="'任务【'+new Date(item.startTime).toLocaleDateString()+'】'"
                               @click.native="openAnnouncement(item)" :description="item.taskName">
                  <template slot="avatar">
                    <Avatar icon="ios-paper-plane"/>
                  </template>
                </ListItemMeta>
              </ListItem>
            </List>-->
          </TabPane>
          <TabPane label="未读消息" icon="md-mail">
            <List :loading="loading" style="cursor: pointer" v-for="(item,index) in msgList" :key="index">
              <ListItem v-if="!item.isRead">
                <ListItemMeta  :title="'公告【'+new Date(item.updateTime).toLocaleDateString()+'】'" @click.native="openAnnouncement(item)"
                               :description="item.title">
                  <template slot="avatar">
                    <Avatar v-if="item.userDO.avatarUrl==null" icon="ios-paper"  />
                    <Avatar v-else :src="item.userDO.avatarUrl"/>
                  </template>
                </ListItemMeta>
              </ListItem>
            </List>
          </TabPane>
        </Tabs>
      </Drawer>
        <open-msg :modal="modal"/>
    </div>
</template>

<script>
    import openMsg from "./openMsg";

    export default {
        components: {openMsg},
        name: "MyMsg",
        props: {
            modal: {
                MyMsgFlag: false,
            }
        },
        data() {
            return {
                loading:false,
                msgList: []
            }
        },
        methods: {
            /**
             * 打开消息或公告
             * @param val
             */
            openAnnouncement(val) {
                this.modal.openMsgFlag = true
                val.isRead = true
                Object.assign(this.modal.objectMsg, val)
            },
        },
        watch: {
            'modal.MyMsgFlag'(val) {
                if (val) {
                    /**
                     * 获取全部信息
                     */
                    this.loading = true
                    this.http.tget(`/msg/getAllMsgById/${this.$store.state.user.user.userId}`).then(res => {
                        if (res.data) {
                            this.msgList = res.data
                        }
                    }).finally(f=>{
                        this.loading = false
                    })
                }
            }
        }
    }
</script>

<style scoped>

</style>
